<!doctype html>
<title>Point collision</title>
<meta charset="utf-8">

<canvas width="550" height="400" style="border: 1px dashed black"></canvas>

<script src="requestAnimationFramePolyfill.js"></script>
<script>

//--- The sprite object

var spriteObject =
{
  sourceX: 0,
  sourceY: 0,
  sourceWidth: 64,
  sourceHeight: 64,
  x: 0,
  y: 0,
  width: 64,
  height: 64,
  
  //Getters to define the
  //left, right, top and bottom sides
  left: function()
  {
    return this.x;
  },
  right: function()
  {
    return this.x + this.width;
  },
  top: function()
  {
    return this.y;
  },
  bottom: function()
  {
    return this.y + this.height;
  }
};

//--- The main program

//The canvas and its drawing surface
var canvas = document.querySelector("canvas");
var drawingSurface = canvas.getContext("2d");

//Canvas text properties
drawingSurface.font = "normal bold 18px Helvetica";
drawingSurface.fillStyle = "#000";
drawingSurface.textBaseline = "top";

//An array to store the sprites
var sprites = [];

//Create the square and center it
var square = Object.create(spriteObject);
square.x = canvas.width / 2 - square.width / 2;
square.y = canvas.height / 2 - square.height / 2;;
sprites.push(square);

//Load the image
var image = new Image();
image.addEventListener("load", loadHandler, false);
image.src = "squares.png";

//The collision message
var message = "No collision…";

//Variables to store the mouse's x and y positions
var mouseX = 0;
var mouseY = 0;

//Add a mousemove event listener
canvas.addEventListener("mousemove", function(event)
{
  
  //Find the mouse's x and y position on the canvas
  mouseX = event.pageX - canvas.offsetLeft;
  mouseY = event.pageY - canvas.offsetTop;
  
}, false);

function loadHandler()
{ 
  update();
}

function update()
{
  //The animation loop
  requestAnimationFrame(update, canvas);
  
  //Use hitTestPoint to check for a collision and
  //return the result (true or false) to the collision variable
  if(hitTestPoint(mouseX, mouseY, square))
  {
    message = "Collision!";
  }
  else
  {
    message = "No Collision…";
  }
  
  //Render the sprites
  render();
}

function hitTestPoint(pointX, pointY, sprite)
{  
  var hit 
    = pointX > sprite.left() && pointX < sprite.right()
    && pointY > sprite.top() && pointY < sprite.bottom();
    
  return hit;
}

//Alternative way to write the hitTestPoint method
/* 
function hitTestPoint(pointX, pointY, sprite)
{  
  var hit = false;
  
  if(pointX > sprite.left()
  && pointX < sprite.right()
  && pointY > sprite.top()
  && pointY < sprite.bottom())
  {
    hit = true;
  }

  return hit;
}
*/

function render()
{ 
  //Clear the previous animation frame
  drawingSurface.clearRect(0, 0, canvas.width, canvas.height);
  
  //Loop through all the sprites and use 
  //their properties to display them
  if(sprites.length !== 0)
  {
    for(var i = 0; i < sprites.length; i++)
    {
      var sprite = sprites[i];
      drawingSurface.drawImage
      (
        image, 
        sprite.sourceX, sprite.sourceY, 
        sprite.sourceWidth, sprite.sourceHeight,
        Math.floor(sprite.x), Math.floor(sprite.y), 
        sprite.width, sprite.height
      ); 
    }
  }
  
  //Display the message text above the square
  drawingSurface.fillText(message, square.x, square.y - 45);
}

</script>
